<template>
	<view>
		<view class="cu-card">
			<view class="cu-item shadow-lg">
				<u--form
					labelPosition="left"
					:model="expressModal"
					ref="uForm"
				>
					<u-form-item
						label="查询地点："
						labelWidth="80px"
						prop="expressAddress"
						borderBottom
						ref="item1"
						 @click="getAddress"
					>
						<view class="flex">
							<u--input
								v-model="expressModal.expressAddress"
								border="surround"
								placeholder="请填写查询地点"
								readonly
							></u--input>
							<u-icon name="map-fill" :customStyle="{padding: '0 5px'}"></u-icon>
						</view>
					</u-form-item>
					<u-form-item
						label="快递公司："
						labelWidth="80px"
						prop="expressCompany"
						ref="item1"
					>
						<picker 
							@change="expressPickerChange" 
							:value="expressIndex" 
							:range="expressList"
							range-key="label"
						>
							<view class="flex">
								<u-input
									v-model="expressModal.expressCompany"
									border="surround"
									placeholder="请填写快递公司"
									readonly
								></u-input>
								<!-- <u-button :customStyle="{width: '60rpx'}" type="primary" icon="map"></u-button> -->
								<u-icon name="plus-circle" :customStyle="{padding: '0 5px'}"></u-icon>
							</view>
						</picker>
					</u-form-item>
				</u--form>
				<u--text type="info" iconStyle="margin-right: 5rpx;" prefixIcon="info-circle" text="温馨提示"></u--text>
				<u-gap height="5" bgColor="#fff"></u-gap>
				<u-line></u-line>
				<u-gap height="8" bgColor="#fff"></u-gap>
				<u--text type="info" size="12" text="1. 输入地名选择对应快递可以查询附近快递网点"></u--text>
				<u--text type="info" size="12" text="2. 数据来源网络,仅供参考"></u--text>
			</view>
			<view class="flex align-center bottom-btn">
				<view class="reset-btn shadow">
					<u-button shape="circle" text="重置" @click="reset"></u-button>
				</view>
				<view class="search-btn shadow">
					<u-button shape="circle" type="primary" text="查询" @click="submit"></u-button>
				</view>
			</view>
		</view>
		
		<cityPicker
			:column="3" 
			default-value="110101" 
			:mask-close-able="true" 
			@confirm="addressConfirm" 
			@cancel="addressCancel" 
			:visible="isShowAddressPicker"
		/>
		
		
		<!-- #ifdef MP-WEIXIN -->
		<view class="ad_wrap">
			<common-ad unitId="adunit-fb6a7c4053fbe690" adType="video" />
		</view>
		<!-- #endif -->
		<!-- <options-com @itemClick="otherAction" :list="[{title:'一转一',id:'onetoone'},{title:'增加货币',id:'add'}]"/> -->
	</view>
</template>

<script>
	import {expressCompanyListQueryByPosition} from "../../controller/request_ctrl";
	import {getStorage, setStorage} from "../../utils/storage_util";
	import {formatTime, formatFloat} from "../../utils/util";
	import optionsCom from "../../components/options.vue";
	import shareConfig from "../../utils/share_config";
	import { mapState, mapActions } from 'vuex';
	import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
	
	let isShow = false;
	let isFirstEnter = true;
	export default {
		components:{
			optionsCom: optionsCom,
			cityPicker
		},
		data() {
			return {
				isShowAddressPicker: false,
				showExpressPicker: false,
				pageIndex: 0, // 分页
				expressModal: {
					expressAddress: '',
					expressCompany: '',
					expressCom: '', // 快递公司key
				},
				rules: {
					'expressAddress': {
						type: 'string',
						required: true,
						message: '请填写查询地点',
						trigger: ['blur', 'change']
					},
					'expressCompany': {
						type: 'string',
						required: true,
						message: '请填写快递公司',
						trigger: ['blur', 'change']
					}
				},
				expressList: [
					{
						label: '申通',
						value: '5',
						companyCode: 'shentong'
					},{
						label: '圆通',
						value: '4',
						companyCode: 'yuantong'
					},{
						label: '韵达',
						value: '2',
						companyCode: 'yunda'
					},{
						label: '中通',
						value: '5',
						companyCode: 'zhongtong'
					},{
						label: '顺丰',
						value: '10',
						companyCode: 'shunfeng'
					},{
						label: '百世',
						value: '6',
						companyCode: 'huitongkuaidi'
					},{
						label: '天天',
						value: '7',
						companyCode: 'tiantian'
					},{
						label: '全峰快递',
						value: '23',
						companyCode: 'quanfengkuaidi'
					},{
						label: '宅急送',
						value: '12',
						companyCode: 'zhaijisong'
					},{
						label: '国通',
						value: '20',
						companyCode: 'guotongkuaidi'
					},{
						label: '德邦快递',
						value: '1',
						companyCode: 'debangwuliu'
					},{
						label: '新邦物流',
						value: '13',
						companyCode: 'xinbangwuliu'
					}
				],
				expressIndex: 0
			}
		},
		computed: {
			...mapState(['expressItem'])
		},
		watch: {
			
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		onShareAppMessage() {
			return shareConfig();
		},
		onShow() {
			if (this.expressItem) {
				this.expressModal.expressCompany = this.expressItem.exp_name;
				this.expressModal.expressCom = this.expressItem.com;
				this.setExpressItem(null);
			}
		},
		onHide() {

		},
		
		methods: {
			...mapActions(['setExpressItem']),
			expressPickerChange(e) {
				console.log('---- expressPickerChange ----', e);
				this.expressIndex = +e.detail.value;
				const expressItem = this.expressList[e.detail.value]
				this.expressModal.expressCompany = expressItem.label;
				this.expressModal.expressCom = expressItem.value;
			},
			getAddress() {
				console.log('---- getAddress ----')
				this.isShowAddressPicker = true;
			},
			addressConfirm(val) {
				console.log('---- addressConfirm ----:', val);
				this.expressModal.expressAddress = val.name;
				this.isShowAddressPicker = false;
			},
			addressCancel() {
				this.isShowAddressPicker = false;
			},
			submit() {
				this.$refs.uForm.validate().then(res => {
					const {expressAddress,expressCom} = this.expressModal;
					uni.navigateTo({
						url: `/others/expressWdList/expressWdList?expressAddress=${expressAddress}&expressCom=${expressCom}`
					});
				}).catch(errors => {
					console.log('---- this.$refs.uForm.validate ----', errors);
					uni.showToast({
						icon: 'none',
						title: '网络繁忙，请稍后再试',
						duration: 2500
					})
				})
			},
			reset() {
				this.$refs.uForm.resetFields();
				this.expressModal = {
					expressAddress: '',
					expressCompany: '',
					expressCom: '', // 快递公司key
				};
			}
		}
	}
</script>

<style scoped lang="scss">
.bottom-btn{
	margin:0 30rpx;
}
.reset-btn{
	margin-right: 30rpx;
	flex: .5;
}
.search-btn{
	flex:1;
}
.picker-container{
	width: 100%;
	height: 100%;
}
</style>
